<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<link rel="stylesheet" href="../../build/aui-css/css/bootstrap.css">
</head>
<style type="text/css" media="screen">
	body {
		font-size: 12px;
	}

	#wrapper {
		padding: 10px;
	}

	#editor {
		height: 400px;
		position: relative;
		width: 800px;
	}
</style>
<body>

<div id="wrapper">
	<h1>Alloy Ace Editor AutoComplete for Velocity demo</h1>

	<p>Type # to see the list of all available Velocity directives
	<p>Type $ to see list of some Velocity variables

	<p>Press Ctrl+Space for PC or Alt-Space for Mac in order to show the list with suggestions

	<div id="editor"></div>
</div>

<script src="../../build/aui/aui.js"></script>

<script type="text/javascript" charset="utf-8">
YUI({
	combine: false,
	filter: 'raw'
}).ready('aui-ace-autocomplete-plugin', 'aui-ace-autocomplete-velocity', function(Y) {
	var editor = new Y.AceEditor(
		{
			boundingBox: '#editor',
			mode: 'php',
			plugins: [
				{
					fn: Y.Plugin.AceAutoComplete,
					cfg: {
						processor: new Y.AceEditor.AutoCompleteVelocity(
							{
								variables: {
									"types": {
										"java.lang.String": {
											"numberOfLeadingZeros": {
												"type": "Method",
												"returnType": "long",
												"argumentTypes": ["long"]
											},
											"toString": {
												"type": "Method",
												"returnType": "java.lang.String",
												"argumentTypes": ["long", "java.lang.String", "int"]
											},
											"field": {
												"type": "java.lang.String"
											}
										},
										"com.liferay.portal.model.Group": {

										},
										"Method": {
											"toString": {
												"type": "Method",
												"returnType": "java.lang.String",
												"argumentTypes": []
											},
											"indexOf": {
												"type": "Method",
												"returnType": "java.lang.Integer",
												"argumentTypes": []
											}
										}
									},
									"variables": {
										"scopeGroupId": {
											"type": "java.lang.String"
										},

										"scopeGroup": {
											"type": "com.liferay.portal.model.Group"
										},

										"scopeGroupString": {
											"type": "java.lang.String"
										}
									}
								}
							}
						),
						render: true,
						visible: false,
						width: 250,
						zIndex: 10000
					}
				}
			],
			value:
				'#set ($theme_display = $themeDisplay)\n' +
				'#set ($portlet_display = $portletDisplay)\n' +
				'\n' +
				'#set ($theme_timestamp = $themeDisplay.getTheme().getTimestamp())\n' +
				'#set ($theme_settings = $themeDisplay.getThemeSettings())\n' +
				'\n' +
				'#set ($css_class = $theme_display.getColorScheme().getCssClass() + " yui3-skin-sam")\n' +
				'\n' +
				'#set ($liferay_toggle_controls = $sessionClicks.get($request, "liferay_toggle_controls", "visible"))\n' +
				'\n' +
				'#if ($layout)\n' +
				'	#set ($page_group = $layout.getGroup())\n' +
				'\n' +
				'	#if ($page_group.isStagingGroup())\n' +
				'		#set ($css_class = $css_class + " staging local-staging")\n' +
				'	#elseif ($theme_display.isShowStagingIcon() && $page_group.hasStagingGroup())' +
				'		#set ($css_class = $css_class + " live-view")\n' +
				'	#elseif ($theme_display.isShowStagingIcon() && $page_group.isStagedRemotely())\n' +
				'		#set ($css_class = $css_class + " staging remote-staging")\n' +
				'	#end\n' +
				'\n' +
				'	#if ($page_group.isControlPanel())\n' +
				'		#set ($liferay_toggle_controls = "visible")\n' +
				'	#end\n' +
				'#end'
		}
	).render();
});
</script>

</body>
</html>